@import '../../../src/global_styling/mixins/helpers';

$guideSideNavWidth: 240px;
$guideZLevelHighest: $euiZLevel9 + 1000;

.guideBody {
  background: linear-gradient(90deg, $euiPageBackgroundColor 50%, $euiColorEmptyShade 50%);

  &--overflowHidden {
    overflow: hidden;
  }
}

@include euiHeaderAffordForFixed;

.euiBody--headerIsFixed {
  .guideSideNav {
    top: $euiHeaderHeightCompensation;
  }
}

.euiBody--headerIsFixed--double {
  @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);

  .guideSideNav {
    top: $euiHeaderHeightCompensation * 2;
  }

  .euiHeader:not(.euiHeader--fixed) {
    // Force headers below the full screen.
    // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
    z-index: 0;
  }
}

.guidePage {
  padding: 0;
}

.guideSideNav {
  width: $guideSideNavWidth;
  position: fixed;
  top: 0;
  bottom: 0;

  .guideSideNav__identity {
    border-bottom: $euiBorderThin;
    padding: $euiSize;
  }

  .guideSideNav__theme {
    font-size: $euiFontSizeS;
    color: $euiColorDarkShade;
  }

  .guideSideNav__content {
    @include euiScrollBar;

    width: $guideSideNavWidth;
    padding: $euiSize;
    position: absolute;
    bottom: 0;
    top: 132px;
    overflow-y: auto;
  }
}

.guideSideNav__item {
  // Hate to do this, but it's the only way to get the badge to display correctly
  .euiSideNavItemButton__label {
    // By using the `icon` display of EuiSideNavItem, it will continue to:
    // a) truncate properly
    // b) not underline the badge when selected
    // But it shows to the left of the label instead of right, so we have to shift the order of the label
    order: -1;
  }

  .guideSideNav__newBadge {
    margin-left: $euiSizeXS;
    margin-right: $euiSizeXS;
  }

  // Shift the margin on the badge when selected and the dropdown arrow no longer shows
  .euiSideNavItemButton-isSelected .guideSideNav__newBadge {
    margin-right: 0;
  }
}

.guideSideNav__item--inSearch {
  color: $euiColorDarkShade;
}

.guidePageContent {
  flex: 1 1 auto;
  padding: $euiSize $euiSizeXL;
  min-height: 100vh;
  background-color: $euiColorEmptyShade;
  border-left: $euiBorderThin;
  max-width: 1000px;
  margin-left: 240px;
}

.guideDemo__highlightLayout {
  .euiPageBody {
    min-height: 460px;
  }

  div {
    background: transparentize($euiColorPrimary, .9);
  }
}

.guideDemo__highlightSpacer {
  .euiSpacer {
    background: transparentize($euiColorPrimary, .9);
  }
}

.guideDemo__highlightGrid {
  .euiFlexItem {
    background: transparentize($euiColorPrimary, .9);
    padding: 16px;
  }
}

.guideDemo__highlightGridWrap {
  .euiFlexItem div {
    background: transparentize($euiColorPrimary, .9);
    padding: 16px;
  }
}

// sass-lint:disable no-important
.guideDemo__textLines {
  background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
  background-size: 100% 8px !important;
  background-position-y: 2px;
}

// sass-lint:disable no-important
.guideDemo__textLines--s {
  background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
  background-size: 100% 7px !important;
  background-position-y: -2px;
}

.guideDemo__color {
  padding: $euiSizeS;
  color: $euiColorEmptyShade;
  font-size: $euiFontSizeS;
  margin-top: $euiSizeS;
  line-height: 1.5;
  height: 64px;

  .guideDemo__colorHex {
    font-size: $euiFontSize;
  }
}


.guideDemo__size {
  background: $euiTextColor;
  display: inline-block;
}

.guideDemo__sizeText {
  line-height: 1.5;
}

.guideDemo__sizeGrid {
  font-size: $euiFontSizeS;
}

.guideDemo__ghostBackground {
  @if (lightness($euiTextColor) < 50) {
    background: $euiColorDarkestShade;
  }
}

.guideDemo__icon {
  text-align: center;

  svg,
  img {
    margin-bottom: $euiSizeS;
  }
}

.dpTest__purpleCal {
  background: $euiColorVis3;
}

.dpTest__purpleInput {
  outline: solid 2px $euiColorVis3;
}

.dpTest__purpleDay {
  background: $euiColorVis3;
}

.dpTest__purplePopper {
  outline: solid 2px $euiColorVis3;
}

.guideOptionsPopover {
  width: $euiSize * 16;
}

.guideCharts__customLegend {
  font-size: $euiFontSizeXS;
  position: absolute;
  width: 93px;
  right: 0;
  bottom: 0;
  padding: $euiSizeXS;
}

.guideCharts__customLegendLine {
  display: inline-block;
  width: $euiSize;
  height: $euiSizeM / 2;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: $euiSizeS;
}

.guideCharts__customLegendLine--thin {
  height: 1px;
}

.guideFullScreenOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.euiDataGridRowCell--favoriteFranchise {
  background: transparentize($color: #800080, $amount: .95) !important;
}

.euiDataGridHeaderCell--favoriteFranchise {
  background: transparentize($color: #800080, $amount: .9) !important;
}

.euiTreeView__nodeInnerExample {
  color: $euiColorDanger;
  font-weight: $euiFontWeightBold;
}

.euiSelectableTemplateSitewide__optionMeta--PINK {
  font-weight: $euiFontWeightMedium;
  color: $euiColorAccentText;
}

@import '../views/guidelines/index';
@import 'guide_section/index';
@import 'guide_rule/index';

@include euiBreakpoint('xs', 's') {
  .guidePage {
    display: block; // Fixes IE
  }

  .guideBody {
    background: none;
  }

  .guideSideNav {
    position: static;
    width: auto;

    // This is a temporary hack till we fix how classes pass into form controls
    .euiFormControlLayout,
    input[type='search'] {
      max-width: 100%;
    }

    .guideSideNav__content {
      position: relative;
      width: auto;
      top: auto;
      bottom: auto;
      padding: 0;
      overflow-y: hidden;
    }

    .guideSideNav__identity {
      position: relative;
      width: auto;
    }

    .guideSideNav__mobileToggle {
      background: $euiColorPrimary;
      color: $euiColorEmptyShade !important;
    }
  }

  .guidePageContent {
    margin-left: 0;
    width: 100%;
  }
}
